<template>
  <div>
    <h1>App</h1>
    <button @click="r1.c.e.aa = 22">{{ r1.c.e.aa }}</button>
    <button @click="r2.c.e.aa = 22">{{ r2.c.e.aa }}</button>

    <button @click="r3.nested = { bar: 100 }">{{ r3.nested }}</button>
    <button @click="r3.nested.bar++">{{ r3.nested.bar }}</button>

    <button @click="ref1.b.c++">{{ ref1.b.c }}</button>
    <button @click="ref2.b.c++">{{ ref2.b.c }}</button>
  </div>
</template>

<script>
import {
  isProxy,
  isRef,
  reactive,
  readonly,
  ref,
  shallowReactive,
  toRef,
  toRefs,
  unref,
  shallowReadonly,
  computed,
  isReadonly,
  toValue,
  shallowRef,
  toRaw,
} from 'vue'

export default {
  setup() {
    const r1 = reactive({
      a: 1,
      b: 2,
      c: {
        e: {
          aa: 1,
        },
        f: 1,
      },
    })

    const r2 = shallowReactive({
      a: 1,
      b: 2,
      c: {
        e: {
          aa: 1,
        },
        f: 1,
      },
    })

    const r3 = shallowReadonly({
      foo: 1,
      nested: {
        bar: 2,
      },
    })

    console.log('r1', r1)
    console.log('r3', r3)

    // ref() 如果接受的值是一个 对象的话，那么内部会使用 reactive 对该对象做处理
    // shallowRef() 如果接受的值是一个 对象的话，那么内部会使用 shallowReactive 对该对象做处理

    const ref1 = ref({ a: 1, b: { c: 3 } })
    const ref2 = shallowRef({ a: 1, b: { c: 3 } })

    const foo = {}
    const reactiveFoo = reactive(foo)

    console.log(reactiveFoo === foo) // false
    console.log(toRaw(reactiveFoo) === foo) // true

    return {
      r1,
      r2,
      r3,
      ref1,
      ref2,
    }
  },
}
</script>
